<template>

    <div class="server container">


        <el-row :gutter="20">

            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <h3>CPU</h3>
                    </div>
                    <div>
                        <el-table
                                :data="cupInfo"
                                style="width: 100%">
                            <el-table-column
                                    prop="attr"
                                    label="属性">
                            </el-table-column>
                            <el-table-column
                                    prop="value"
                                    label="值">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <h3>内存</h3>
                    </div>
                    <div>
                        <el-table
                                :data="memoryInfo"
                                style="width: 100%">
                            <el-table-column
                                    prop="attr"
                                    label="属性">
                            </el-table-column>
                            <el-table-column
                                    prop="memory"
                                    label="内存">
                            </el-table-column>
                            <el-table-column
                                    prop="go"
                                    label="GO">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>

        </el-row>

        <el-row :gutter="20">

            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <h3>服务器信息</h3>
                    </div>
                    <div>

                        <el-table :data="serverInfo"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="服务器名称">
                            </el-table-column>
                            <el-table-column
                                    prop="ip"
                                    label="服务器IP">
                            </el-table-column>
                            <el-table-column
                                    prop="os"
                                    label="操作系统">
                            </el-table-column>
                            <el-table-column
                                    prop="framework"
                                    label="系统架构">
                            </el-table-column>

                        </el-table>

                    </div>
                </el-card>
            </el-col>

        </el-row>

        <el-row :gutter="20">

            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <h3>Go信息</h3>
                    </div>
                    <div>
                        <el-table :data="goINfo"
                                  style="width: 100%">

                            <el-table-column
                                    prop="language"
                                    label="语言环境">
                            </el-table-column>

                            <el-table-column
                                    prop="start_time"
                                    label="启动时间">
                            </el-table-column>

                            <el-table-column
                                    prop="home"
                                    label="安装路径">
                            </el-table-column>

                            <el-table-column
                                    prop="obj_path"
                                    label="项目路径">
                            </el-table-column>

                            <el-table-column
                                    prop="version"
                                    label="版本">
                            </el-table-column>

                            <el-table-column
                                    prop="run_time"
                                    label="运行时长">
                            </el-table-column>

                        </el-table>
                    </div>
                </el-card>
            </el-col>

        </el-row>

        <el-row :gutter="20">

            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <h3>磁盘状态</h3>
                    </div>
                    <div>
                        <el-table :data="diskInfo"
                                  style="width: 100%">

                            <el-table-column
                                    prop="path"
                                    label="盘符路径">
                            </el-table-column>

                            <el-table-column
                                    prop="fstype"
                                    label="文件系统">
                            </el-table-column>

                            <el-table-column
                                    prop="total"
                                    label="总大小">
                            </el-table-column>

                            <el-table-column
                                    prop="free"
                                    label="可用大小">
                            </el-table-column>

                            <el-table-column
                                    prop="used"
                                    label="已用大小">
                            </el-table-column>

                            <el-table-column
                                    prop="usedPercent"
                                    label="已用百分比">
                            </el-table-column>

                        </el-table>
                    </div>
                </el-card>
            </el-col>

        </el-row>
    </div>

</template>


<script>

    import utils  from "@/utils/function"
    const  { request,dateFormat } = utils

    export default {
        data() {
            return {
                cupInfo:[],
                memoryInfo:[],
                serverInfo:[],
                goINfo:[],
                diskInfo:[]
            }
        },
        created() {
            this.getServerInfo()
        },
        methods: {

            getServerInfo(){
                request.loading().get("/system/monitor/server/info").then(response=>{
                    //console.log(response)
                    let {code,data:{
                        cpuAvg5,
                        cpuAvg15,
                        cpuNum,
                        cpuUsed,
                        memFree,
                        memTotal,
                        memUsage,
                        memUsed,
                        goFree,
                        goHome,
                        goName,
                        goRunTime,
                        goStartTime,
                        goTotal,
                        goUsage,
                        goUsed,
                        goUserDir,
                        goVersion,
                        sysOsName,
                        sysOsArch,
                        sysComputerName,
                        sysComputerIp,
                        disklist
                    },msg } = response

                    if(code === 0){

                        this.cupInfo = [
                            {
                                attr:"核心数",
                                value:cpuNum || ''
                            },
                            {
                                attr:"CUP使用率",
                                value:(cpuUsed || 0) + '%'
                            },
                            {
                                attr:"Load Avg 5",
                                value:cpuAvg5 || 0
                            },
                            {
                                attr:"Load Avg 15",
                                value:cpuAvg15 || 0
                            }
                        ]

                        this.memoryInfo = [
                            {
                                attr:"总内存",
                                memory:memTotal || 0,
                                go:goTotal || 0
                            },
                            {
                                attr:"已用内存",
                                memory:memUsed || 0,
                                go:goUsed || 0
                            },
                            {
                                attr:"剩余内存",
                                memory:memFree || 0,
                                go:goFree || 0
                            },
                            {
                                attr:"使用率",
                                memory : (memUsage || 0) + '%',
                                go : (goUsage || 0) + '%'
                            }
                        ]

                        this.serverInfo = [
                            {
                                name:sysComputerName || '',
                                ip:sysComputerIp|| '',
                                os:sysOsName|| '',
                                framework:sysOsArch|| ''
                            }
                        ]

                        this.goINfo = [
                            {
                                language:goName || '',
                                start_time:goStartTime || '',
                                home:goHome || '',
                                obj_path:goUserDir || '',
                                version:goVersion || '',
                                run_time:goRunTime || ''
                            }
                        ]


                        if(_.isArray(disklist)){
                            for(let i = 0; i < disklist.length;i++ ){
                                disklist[i].usedPercent = disklist[i].usedPercent ? disklist[i].usedPercent + '%' : '0%'
                                this.diskInfo.push(disklist[i])
                            }

                        }

                    }


                })
            }
        }

    }
</script>
<style lang="scss" scoped>

    .server{
        overflow: scroll;
        .el-row{
            margin-bottom: 20px;
        }
    }
</style>
